<template>
  <page-scroll :footer="false" :ishead-bg="false">
    <template #bg>
      <div class="bg"></div>
    </template>
    <template #header>
      <gltitle
          :title="title"
          :is_name="true"
          :is_back="true"
          :is_lang="false"
          :is_kf="false"
          :is_right="false"
      ></gltitle>
    </template>
    <template #content>
      <div class="turntable">
        <LuckyHead @showRule="showRule=true" @showRecord="showRecord=true"
                       @exchange="$emit('exchange')"/>
        <LuckyBody :luckyInfo="luckyInfo"/>
        <LuckyFoot :luckyInfo="luckyInfo"/>
        <LuckyRulePopup v-model="showRule"/>
        <LuckyRecordPop v-model="showRecord"/>
      </div>
    </template>
  </page-scroll>
</template>
<script>
import {Dialog} from "vant";
import LuckyHead from "@/views/lucky/components/LuckyHead.vue";
import LuckyBody from "@/views/lucky/components/LuckyBody.vue";
import LuckyFoot from "@/views/lucky/components/LuckyFoot.vue";
import LuckyRulePopup from "@/views/lucky/components/LuckyRulePopup.vue";
import LuckyRecordPop from "@/views/lucky/components/LuckyRecordPop.vue";

export default {
  components: {LuckyRecordPop, LuckyHead, LuckyBody, LuckyFoot, LuckyRulePopup},

  data() {
    return {
      title: this.$t("lucky.doc1"),
      showRule: false,
      showRecord: false,
      luckyInfo: {}
    };
  },
  created() {
    this.getLuckyInfo();
  },
  methods: {
    async getLuckyInfo() {
      let url = this.URL.lucky.reward
      const {code, data, message} = await this.$post(url)
      if (code != 0) this.$toast(message);
      this.luckyInfo = data;
    }
  }
};
</script>

<style lang="less" scoped>
/deep/ .head{
  background: #151515 !important;
}
.turntable{
  background:#121622 url('../../assets/images/lucky/bg.png') no-repeat 0 -1.3rem;
  background-size: 100% 17.6rem;
}
</style>
